<template>
  <Header />
  <div class="login-bg">
    <section class="login-card">
      <h2 class="login-title">欢迎登录</h2>
      <form @submit.prevent="login" class="login-form">
        <input v-model="username" placeholder="用户名" required class="login-input" />
        <input v-model="password" type="password" placeholder="密码" required class="login-input" />
        <button type="submit" class="login-btn">登录</button>
      </form>
      <div v-if="error" class="error">{{ error }}</div>
    </section>
    <Footer />
  </div>
</template>
<script setup lang="ts">
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref } from 'vue'
import { login as loginApi } from '../api/user'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user'

const username = ref('')
const password = ref('')
const error = ref('')
const router = useRouter()
const userStore = useUserStore()

async function login() {
  try {
    const response = await loginApi(username.value, password.value);

    // 检查业务状态码
    if (response.code === 200) {
      // 更新store
      const userData = response.data;
      userStore.setUser(userData);
      userStore.setToken(userData.token);
      userStore.setNickname(userData.nickname);
      // 登录接口返回后
      userStore.setUser(response.data) // res.data 必须包含 id 字段
      console.log("登录成功，Token:", userData.token);

      // 跳转到首页
      router.push('/');
    } else {
      // 显示后端返回的错误信息
      error.value = response.message || '登录失败，请重试';
      console.error("登录失败:", response.message);
    }
  } catch (e) {
    // 处理网络错误或其他异常
    error.value = e.message || '网络错误，请检查网络连接';
    console.error("登录异常:", e);
  }
}
</script>
<style scoped>
.login-bg {
  min-height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #e0e7ff 0%, #f0fdfa 100%);
}
.login-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
  opacity: 1;
  filter: none;
}
.login-card {
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(80,120,255,0.13);
  padding: 48px 36px 36px 36px;
  max-width: 350px;
  width: 100%;
  margin: 72px auto 32px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.3s, transform 0.3s;
  animation: floatIn 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
.login-card:hover {
  box-shadow: 0 16px 40px rgba(80,120,255,0.18);
  transform: translateY(-4px) scale(1.025);
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-title {
  font-size: 26px;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 32px;
  letter-spacing: 2px;
}
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.login-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e3eaf5;
  border-radius: 8px;
  font-size: 16px;
  background: #f6faff;
  transition: border 0.2s, box-shadow 0.2s;
  outline: none;
}
.login-input:focus {
  border: 1.5px solid #2563eb;
  box-shadow: 0 2px 8px rgba(80,120,255,0.08);
  background: #fff;
}
.login-btn {
  width: 100%;
  padding: 14px 0;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(80,120,255,0.08);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
  will-change: transform;
}
.login-btn:active {
  transform: scale(0.97);
}
.login-btn:hover {
  background: linear-gradient(90deg, #1d4ed8, #2563eb);
  box-shadow: 0 4px 16px rgba(80,120,255,0.13);
}
.error {
  color: #e00b0b;
  margin-top: 18px;
  font-size: 15px;
  text-align: center;
}
@media (max-width: 500px) {
  .login-card {
    padding: 32px 10px 24px 10px;
    max-width: 98vw;
  }
  .login-title {
    font-size: 22px;
  }
}
.header{
  width: 100vw;
}
</style>
